<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>收益计算器</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>

    <script type="text/javascript">
        function closeWin(){
            api.closeWin({
            });
        };
    </script>
</head>
<body>
   <!-- 头部 -->
   <header class="aui-bar aui-bar-nav" id="topbar">
    <a class="aui-pull-left aui-btn" onclick="closeWin()">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">收益计算器</div>
</header>
<style>
    html,body{height:100%;}
</style>
<div class="calculator">
<!--         <div class="calculator-t">
            <h2>还款方式</h2>
            <div class="aui-list-item-inner">
                <ul>
                    <li><label><input class="aui-radio" type="radio" name="radio2" tapmode checked>按月付息，到期还本</label></li>
                    <li><label><input class="aui-radio" type="radio" name="radio2" tapmode>一次性还本付息</label></li>
                    <li><label><input class="aui-radio" type="radio" name="radio2" tapmode>等额本息</label></li>
                    <li><label><input class="aui-radio" type="radio" name="radio2" tapmode>等额本金</label></li>
                </ul>
            </div>
        </div> -->
        <div class="calculator-d">
            <ul>
                <li>
                    <label>投资金额</label>
                    <input type="text" id="invest" tapmode placeholder="请输入数字">
                    <span>元</span>
                </li>
                <li>
                    <label>投资期限</label>
                    <input type="text" id="limit" tapmode placeholder="请输入数字">
                    <span>月</span>
                </li>
                <li>
                    <label>年化收益</label>
                    <input type="text" id="rate" tapmode placeholder="请输入数字">
                    <span>%</span>
                </li>
                <li>
                    <label>预期收益</label>
                    <input type="text" readonly="readonly" id="money">
                    <span >元</span>
                </li>
            </ul>
        </div>
        <div class="calculator-btn">
            <div onclick="remove()">清空</div>
            <div onclick="count_money()">算算赚多少</div>
        </div>
    </div>
</body>

<script type="text/javascript">
    function count_money() {
        var invest = document.getElementById('invest').value;

        if (isNaN(invest) || invest == '') {
            alert('投资金额请输入正确的数字或者小数');
            return false;
        }
        var limit = document.getElementById('limit').value;
        if (isNaN(limit) || limit == '') {
            alert('投资期限请输入正确的数字或者小数');
            return false;
        }
        var rate = document.getElementById('rate').value;
        if (isNaN(rate) || rate == '') {
            alert('年化收益请输入正确的数字或者小数');
            return false;
        }
        var money = invest * limit * rate / 12 / 100;
        $('#money').val(money);
    }

    function remove() {
        $('#invest').val("");
        $('#limit').val("");
        $('#rate').val("");
        $('#money').val("");
    }
</script>
</html>
